<template>
  <div class="review-container">
    <div class="review-header">
      <h2>商品评价</h2>
      <p class="goods-name">{{ goods?.name || '加载中...' }}</p>
    </div>

    <div class="review-form">
      <h3>写评价</h3>
      <textarea
        v-model="reviewContent"
        placeholder="请输入您的评价内容..."
        class="review-textarea"
        rows="6"
      ></textarea>
      <div class="review-actions">
        <button @click="submitReview" :disabled="!reviewContent.trim() || loading" class="submit-btn">
          {{ loading ? '提交中...' : '提交评价' }}
        </button>
      </div>
    </div>

    <div v-if="score" class="score-display">
      <p>AI评分：<span class="score-value">{{ score }}</span> / 10</p>
    </div>

    <div class="reviews-list">
      <h3>评价列表</h3>
      <div v-if="reviews.length === 0" class="no-reviews">
        <p>暂无评价</p>
      </div>
      <div v-else>
        <div v-for="review in reviews" :key="review.id" class="review-item">
          <div class="review-user">
            <span class="user-avatar">👤</span>
            <span class="user-name">用户{{ review.user_id }}</span>
            <span class="review-score">评分：{{ review.score }}</span>
          </div>
          <div class="review-content">{{ review.content }}</div>
          <div class="review-time">{{ formatTime(review.created_at) }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from '@/api'

const route = useRoute()
const router = useRouter()

const goodsId = ref(route.params.id)
const goods = ref(null)
const reviewContent = ref('')
const reviews = ref([])
const score = ref(null)
const loading = ref(false)

onMounted(async () => {
  await fetchGoodsDetail()
  await fetchReviews()
})

const fetchGoodsDetail = async () => {
  try {
    const response = await axios.get(`/goods/${goodsId.value}`)
    goods.value = response.data
  } catch (error) {
    console.error('获取商品详情失败:', error)
    alert('获取商品详情失败')
  }
}

const fetchReviews = async () => {
  try {
    const response = await axios.get(`/goods/${goodsId.value}/reviews`)
    reviews.value = response.data
  } catch (error) {
    console.error('获取评价列表失败:', error)
  }
}

const submitReview = async () => {
  if (!reviewContent.value.trim()) {
    alert('请输入评价内容')
    return
  }

  loading.value = true
  score.value = null

  try {
    const token = localStorage.getItem('token')
    if (!token) {
      alert('请先登录')
      router.push('/login')
      return
    }

    const response = await axios.post(
      `/goods/${goodsId.value}/review`,
      {
        goods_id: parseInt(goodsId.value),
        content: reviewContent.value
      },
      {
        headers: {
          'Authorization': `Bearer ${token}`
        }
      }
    )

    // 显示评分
    score.value = response.data.score

    // 清空输入框
    reviewContent.value = ''

    // 刷新评价列表
    await fetchReviews()

    alert('评价提交成功！')
  } catch (error) {
    console.error('提交评价失败:', error)
    alert(error.response?.data?.detail || '提交评价失败，请重试')
  } finally {
    loading.value = false
  }
}

const formatTime = (timeStr) => {
  if (!timeStr) return ''
  const date = new Date(timeStr)
  return date.toLocaleString('zh-CN')
}
</script>

<style scoped>
.review-container {
  width: 100vw;
  min-height: 100vh;
  background: #f5f5f5;
  padding: 20px;
}

.review-header {
  background: white;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
}

.review-header h2 {
  font-size: 24px;
  color: #333;
  margin-bottom: 10px;
}

.goods-name {
  font-size: 16px;
  color: #666;
}

.review-form {
  background: white;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
}

.review-form h3 {
  font-size: 18px;
  color: #333;
  margin-bottom: 15px;
}

.review-textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  resize: vertical;
  box-sizing: border-box;
}

.review-actions {
  margin-top: 15px;
  text-align: right;
}

.submit-btn {
  padding: 12px 30px;
  background: #ff4757;
  color: white;
  border: none;
  border-radius: 25px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s;
}

.submit-btn:hover:not(:disabled) {
  background: #ff3838;
  transform: translateY(-2px);
}

.submit-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.score-display {
  background: white;
  padding: 15px 20px;
  border-radius: 10px;
  margin-bottom: 20px;
  text-align: center;
}

.score-value {
  font-size: 24px;
  font-weight: bold;
  color: #ff4757;
}

.reviews-list {
  background: white;
  padding: 20px;
  border-radius: 10px;
}

.reviews-list h3 {
  font-size: 18px;
  color: #333;
  margin-bottom: 15px;
}

.no-reviews {
  text-align: center;
  padding: 40px;
  color: #999;
}

.review-item {
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.review-item:last-child {
  border-bottom: none;
}

.review-user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.user-avatar {
  font-size: 20px;
}

.user-name {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.review-score {
  font-size: 14px;
  color: #ff4757;
  font-weight: bold;
  margin-left: auto;
}

.review-content {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 10px;
}

.review-time {
  font-size: 12px;
  color: #999;
}
</style>

